import {useEffect, useState} from "react";
import Apis from "../../configs/Apis";
import RequestUtils from "../../utils/RequestUtils";
import {message} from "antd";
import NacosConfigList from "../../components/./configuration/NacosConfigList";
import NacosYamlList from "../../components/./configuration/NacosYamlList";

const Configuration = () => {

    const [messageApi, contextHolder] = message.useMessage();
    // nacos配置集合
    const [nacosConfigs, setNacosConfigs] = useState([]);
    // yaml配置集合
    const [yamlConfigs, setYamlConfigs] = useState([]);

    useEffect(() => {
        // 查询nacos配置集合
        doSearchNacosConfigList();
        // 分页查询yaml配置
        doPageQueryYamlConfig();
    }, []);

    /**
     * 查询nacos配置结合
     */
    const doSearchNacosConfigList = () => {
        RequestUtils.post(Apis.Nacos.searchNacosConfigList, {})
            .then(res => setNacosConfigs(res))
            .catch(err => messageApi.error("查询Nacos配置列表失败: " + err.message));
    }

    /**
     * 分页查询yaml配置 (这里无需分页, 直接全部返回即可)
     */
    const doPageQueryYamlConfig = () => {
        RequestUtils.post(Apis.Nacos.pageQueryYamlConfig, {
            pageNum: 1,
            pageSize: 1000
        }).then(res => {
            setYamlConfigs(res.records);
        }).catch(err => {
            messageApi.error("查询yaml配置失败" + err.message);
        })
    }

    return (
        <div>
            {contextHolder}

            {/* nacos配置列表部分 */}
            <NacosConfigList
                messageApi={messageApi}
                nacosConfigs={nacosConfigs}
                setNacosConfigs={setNacosConfigs}
                doSearchNacosConfigList={doSearchNacosConfigList}
            />

            {/* yaml配置列表部分 */}
            <NacosYamlList
                yamlConfigs={yamlConfigs}
            />

        </div>
    )
}
export default Configuration;